import React, { useState, useEffect } from "react";
import MainLayout from "@component/mainLayout/mainLayout";
import { connect } from "react-redux";
import { Toast } from "antd-mobile";
import { InterfaceG } from "@config/Config";
import XhfFourInfo from "../components/xhfFourInfo";
import { getSupportedBankList } from "@redux/Action/bank/bank";
import yhTools from "@tools/yh";
import { checkBonus } from "@redux/Action/bank/bank";
import creditStore from "../creditStore";

const FourElementPage = props => {
	const [fourElementParams, setFourElementParams] = useState({}); //四要素信息
	const [inputDisabled, setInputDisabled] = useState(false); //是否禁用身份证、姓名输入框
	const [bannerList, setBannerList] = useState(""); //头部banner
	const { _getSupportedBankList } = props;

	//反显四要素
	const getFourElementInfo = () => {
		const objs = {
			url: InterfaceG.xhf_credit_initFourElementInfo,
			params: {}
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				const data = res.data;
				if (data.userName && data.idNo) {
					setFourElementParams({
						userBankPhone: data.mobilePhone,
						accountNo: data.accountNo,
						idNo: data.idNo,
						userName: data.userName
					});
					setInputDisabled(true);
				}
				Toast.hide();
			} else {
				Toast.info(res.message, 2);
			}
		});
	};

	//获取头部banner
	const getBannerList = () => {
		const params = {
			url: InterfaceG.getChannelBannerList,
			params: {
				pageType: "xhf_auth_image",
				productNo: "601"
			},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			const { code, data = {} } = res;
			if (code == "0") {
				let bannerList = [];
				let bannerObj = data["1"] && data["1"].length > 0 ? data["1"]["0"] : {};
				bannerObj["link"] = bannerObj.linkUrl;
				bannerList.push(bannerObj);
				setBannerList(bannerList);
			}
		});
	};

	//提交四要素
	const submitHandle = values => {
		console.log("四要素提交参数：", values, inputDisabled);
		//是否已过四要素
		if (inputDisabled) {
			let infoStr = JSON.stringify({
				idNo: values.idNo,
				userName: values.userName
			});
			sessionStorage.setItem("credit_faceParams_info", infoStr);
			props.goNext();
		} else {
			let objs = {
				url: InterfaceG.xhf_credit_submitFourElement,
				params: values,
				_alertShow: false
			};
			Toast.loading("加载中...", 100);
			yhTools.request(objs).then(async res => {
				Toast.hide();
				if (res.code === "0") {
					let infoStr = JSON.stringify({
						idNo: values.idNo,
						userName: values.userName
					});
					sessionStorage.setItem("credit_faceParams_info", infoStr);
					props.goNext();
				} else {
					Toast.info(res.message, 2);
				}
			});
		}
	};

	useEffect(() => {
		console.log("【四要素】props:", props);
		props._checkBonus(`${props.currentCode}0${props.current}`);
		getBannerList();
		getFourElementInfo();
		_getSupportedBankList({ channelCode: "ll" });
	}, []);

	const pageParams = {
		header: {
			title: "实名认证"
		},
		cacheLifecycles: props.cacheLifecycles,
		isModal: true,
		history: props.history
	};
	return (
		<MainLayout pageParams={pageParams} handleBack={props.handleBack}>
			<XhfFourInfo
				{...props}
				pageParams={{
					...fourElementParams,
					bannerList,
					inputDisabled
				}}
				Submit={submitHandle}
			></XhfFourInfo>
		</MainLayout>
	);
};

const mapStateToProps = state => state;

const mapDispatchToProps = dispatch => {
	return {
		_getSupportedBankList: (value, fun) => {
			dispatch(getSupportedBankList(value, fun));
		},
		_checkBonus: (val1, val2) => dispatch(checkBonus(val1, val2))
	};
};

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(creditStore(FourElementPage));
